<!DOCTYPE html>
<html lang="zh_CN" xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<!-- 在head中的脚本会在页面调用的时候执行 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui@2.5.2/lib/theme-chalk/index.css">
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui@2.5.2/lib/index.js"></script>
<!-- 引入js-->
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<head>

    <meta charset="UTF-8">
    <title>LKR聊天室</title>

    <div id="app">
        <div id="createRoomDiv">
            <el-dialog title="创建房间" :visible.sync="createFormVisible" :close-on-click-modal="false" :close-on-press-escape="false">
                <el-form :model="room">
                    <el-form-item label="名称" :label-width="formLabelWidth">
                        <el-input v-model.trim="room.name" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="描述（可选）" :label-width="formLabelWidth">
                        <el-input v-model.trim="room.description" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="分类" :label-width="formLabelWidth">
                        <el-select v-model="room.type" placeholder="请选择房间分类">
                            <el-option label="学习" value="EDU"></el-option>
                            <el-option label="工作" value="WORK"></el-option>
                            <el-option label="其他" value="OTH"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="加入认证" :label-width="formLabelWidth">
                        <el-select v-model="room.authType" placeholder="请选择房间类型">
                            <el-option label="公开" value="PUBLIC"></el-option>
                            <el-option label="需要登录" value="DEFAULT"></el-option>
                            <el-option label="加密" value="PROTECTED"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="时长" :label-width="formLabelWidth">
                        <el-select v-model="room.holdHour" placeholder="请选择时长">
                            <el-option label="1小时" value="1"></el-option>
                            <el-option label="2小时" value="2"></el-option>
                            <el-option label="5小时" value="5"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="输入房间密码" :label-width="formLabelWidth" v-show="showPwdIpt">
                        <el-input v-model.trim="room.pwd" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="" :label-width="formLabelWidth">
                        <span>注意：创建10分钟后无成员加入房间将自动解散</span>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="createFormVisible = false">取 消</el-button>
                    <el-button type="primary" @click="createRoom">创 建</el-button>
                </div>
            </el-dialog>
        </div>
        <div id="getRoomDiv">
            <el-dialog title="详情" :visible.sync="getRoomVisible" width="30%" center :close-on-click-modal="false" :close-on-press-escape="false">
                <el-card shadow="hover">
                    <img th:src="@{/image/foo_study_cover.png}" class="image room-cover" alt="房间封面">
                    <div style="padding: 14px; font-family: 'PingFang SC'; font-size: medium; line-height: 28px">
                        <label>编号：</label><span>{{room2.id}}</span><br>
                        <label>名称：</label><span>{{room2.name}}</span><br>
                        <label>描述：</label><span>{{room2.description}}</span><br>
                        <label>类型：</label><span>{{room2.type}}</span><br>
                        <label>状态：</label><span>{{room2.state}}</span><br>
                        <label>认证：</label><span>{{room2.authType}}</span><br>
                        <label>创建于：</label><span><time>{{room2.gmtCreated}}</time></span><br>
                        <div class="bottom clearfix" style="!important; text-align: right; padding-right: 40px;">
                            <el-button type="text" class="button" @click="beforeJoinRoom" > 加 入 </el-button>
                        </div>
                    </div>
                </el-card>
            </el-dialog>
        </div>

        <el-button @click="visible = true">Button</el-button>
        <el-dialog :visible.sync="visible" title="Hello world">
            <p>Try Element</p>
        </el-dialog>
        <el-menu :default-active="navActiveIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
            <el-menu-item index="1">首页</el-menu-item>
            <el-submenu index="2">
                <template slot="title">个人中心</template>
                <el-menu-item index="2-1">登陆</el-menu-item>
                <el-menu-item index="2-2">注册</el-menu-item>
                <el-menu-item index="2-3"></el-menu-item>
                <el-submenu index="2-4">
                    <template slot="title">选项4</template>
                    <el-menu-item index="2-4-1">选项1</el-menu-item>
                    <el-menu-item index="2-4-2">选项2</el-menu-item>
                    <el-menu-item index="2-4-3">选项3</el-menu-item>
                </el-submenu>
            </el-submenu>
            <el-menu-item index="3" disabled>消息中心</el-menu-item>
            <el-menu-item index="4"><a href="https://www.ele.me" target="_blank">订单管理</a></el-menu-item>
        </el-menu>
        <div class="line"></div>

        <el-button type="primary" plain icon="el-icon-edit" class="my-btn" @click="createFormVisible = true">创建聊天室
        </el-button>
        <el-button type="success" plain icon="el-icon-search" class="my-btn" @click="openJoinDialog">加入聊天室</el-button>
    </div>

</head>
<body>
<script type="text/javascript" th:src="@{/js/main.js}"></script>

</body>
<style type="text/css" scoped>
    .my-btn {
        height: 60px;
        width: 250px;
    }
    .room-cover {
        width: auto;
        height: auto;
        max-width: 100%;
        max-height: 100%;
    }
</style>
</html>